<!-- 排班设置页 -->
<template>
  <div class="dashboard-container waybill-list customer-list-box">
    <el-card style="margin:20px 20px 55px">
      <el-button
        type="danger"
        style="margin: 15px 0 20px 0;"
        @click="openDialog('add')"
      >添加工作模式</el-button>
      <el-table
        :data="workList"
        fit
      >
        <el-table-column
          prop="id"
          label="工作模式编号"
        >
        </el-table-column>
        <el-table-column
          prop="name"
          label="工作模式"
        >
        </el-table-column>
        <el-table-column
          prop="workPatternTypeDesc"
          label="类型"
        >
        </el-table-column>
        <el-table-column
          prop="workDate"
          label="工作日期"
          width="460"
        >
        </el-table-column>
        <el-table-column
          prop="time"
          label="工作时间"
        >
        </el-table-column>
        <el-table-column
          label="操作"
          align="center"
        >
          <template #default="{ row }">
            <el-button
              type="text"
              @click="openDialog('edit',row.id)"
            >编辑</el-button>
            <div style="display: inline-block;vertical-align: middle;color:#E3E3E3">|</div>
            <el-button
              type="text"
              style="color: #F56C6C;"
              @click="openDialog('del', row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <div class="block">
        <span class="demonstration"></span>
        <el-pagination
          :current-page="page"
          :page-sizes="[8, 10, 13, 15]"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
        >
        </el-pagination>
      </div>
    </el-card>

    <!-- 对话框 -->
    <el-dialog
      :title="title"
      :visible.sync="dialogVisible"
      :width="dialogWidth"
      :before-close="handleClose"
    >
      <div v-if="dialogType === 'del'">
        <div style="margin-left: 5px; color:#20232A;">确认删除吗？</div>
        <div style="text-align: right;">
          <el-button @click="handleClose">取消</el-button>
          <el-button
            type="danger"
            @click="handleDel"
          >确认</el-button>
        </div>
      </div>
      <div v-else>
        <span>
          <div>
            <el-tabs
              v-if="dialogType === 'add'"
              v-model="dialogForm.workPatternType"
              @tab-click="handleClick"
            >
              <el-tab-pane
                label="礼拜制"
                name="1"
              >礼拜制</el-tab-pane>
              <el-tab-pane
                label="连续制"
                name="2"
              >连续制</el-tab-pane>
            </el-tabs>
            <el-tabs
              v-if="dialogType === 'edit'"
              v-model="dialogForm.workPatternType"
            >
              <el-tab-pane
                v-if="dialogForm.workPatternTypeDesc === '连续制'"
                label="连续制"
                name="2"
              >连续制</el-tab-pane>
              <el-tab-pane
                v-else
                label="礼拜制"
                name="1"
              >礼拜制</el-tab-pane>
            </el-tabs>
            <el-form
              ref="form"
              :model="dialogForm"
              :rules="rules"
              label-width="150px"
              class="demo-ruleForm"
            >
              <el-form-item
                label="工作模式名称"
                prop="name"
              >
                <el-input
                  v-model="dialogForm.name"
                  placeholder="请填写工作模式名称"
                ></el-input>
              </el-form-item>
              <el-form-item
                v-if="labelTag === '1'"
                label="连续工作提天数"
                prop="days"
              >
                <el-checkbox-group v-model="dialogForm.days">
                  <el-checkbox
                    label="monday"
                    name="days"
                    style="position: relative;"
                  >周一
                  </el-checkbox>
                  <el-checkbox
                    label="tuesday"
                    name="days"
                  >周二</el-checkbox>
                  <el-checkbox
                    label="wednesday"
                    name="days"
                  >周三</el-checkbox>
                  <el-checkbox
                    label="thursday"
                    name="days"
                  >周四</el-checkbox>
                  <el-checkbox
                    label="friday"
                    name="days"
                  >周五</el-checkbox>
                  <el-checkbox
                    label="saturday"
                    name="days"
                  >周六</el-checkbox>
                  <el-checkbox
                    label="sunday"
                    name="days"
                  >周日</el-checkbox>
                </el-checkbox-group>
                <div style="margin-top:-15px;color:#C0C4CC">选中为工作时间，未选中为休息时间</div>
              </el-form-item>
              <el-form-item
                v-else
                label="连续工作提天数"
                prop="days"
              >
                <div style="display: flex;">
                  <div style="margin-right: 5px;">上</div>
                  <div style="position: relative;">
                    <el-input
                      v-model="dialogForm.workDayNum"
                      placeholder="请输入"
                      style="width:120px"
                    ></el-input>
                    <div style="position: absolute; right:5px;top:0px">天</div>
                  </div>
                  <div style="margin: 0 10px;">休</div>
                  <div style="position: relative;">
                    <el-input
                      v-model="dialogForm.restDayNum"
                      placeholder="请输入"
                      style="width:120px"
                    ></el-input>
                    <div style="position: absolute; right:5px;top:0px">天</div>
                  </div>
                </div>
              </el-form-item>

              <el-form-item
                label="工作时间"
                required
              >
                <div style="display: flex;">
                  <el-time-select
                    v-model="dialogForm.workStartMinute1"
                    placeholder="起始时间"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30'
                    }"
                  >
                  </el-time-select>
                  <div style="margin: 0 10px;">到</div>
                  <el-time-select
                    v-model="dialogForm.workEndMinute1"
                    placeholder="结束时间"
                    :picker-options="{
                      start: '08:30',
                      step: '00:15',
                      end: '18:30',
                    }"
                  >
                  </el-time-select>
                </div>
              </el-form-item>
            </el-form>
          </div>
        </span>
        <span
          slot="footer"
          class="dialog-footer"
        >
          <div style="text-align: center;">
            <el-button @click="handleClose">取 消</el-button>
            <el-button
              type="danger"
              @click="confirm"
            >确 定</el-button>
          </div>
        </span>
      </div>
    </el-dialog>
  </div>
</template>

<script>
import { getWorkListPageAPI, delWorkAPI, addWorkAPI, getDetailAPI, updateWorkAPI } from '@/api/work'
export default {
  data() {
    return {
      title: '新增工作模式',
      page: 1,
      pageSize: 10,
      total: 0,
      workList: [],
      dialogVisible: false,
      rules: {
        name: [
          { required: true, message: '请输入名称', trigger: 'blur' }
        ],
        days: [
          { type: 'array', required: true, message: '请输入日期', trigger: 'change' }
        ]
      },
      dialogForm: {
        name: '',
        days: []
      },
      value: '',
      labelTag: '1',
      dialogType: 'add',
      delId: '',
      operator: 1024705709255773345
    }
  },
  computed: {
    dialogWidth() {
      return this.dialogType === 'del' ? '30%' : '50%'
    }
  },
  mounted() {
    this.getWorkList()
  },
  methods: {
    // 打开编辑窗口
    // edit(row) {
    //   console.log(row)
    //   row.workPatternType = String(row.workPatternType)
    //   this.labelTag = row.workPatternType
    //   this.dialogForm = row
    //   this.dialogVisible = true
    // },
    // 处理删除
    async handleDel() {
      await delWorkAPI(this.delId)
      this.dialogVisible = false
      this.getWorkList()
    },
    // 格式化日期
    formatMinutesToTime(minutes) {
      const hours = Math.floor(minutes / 60)
      const mins = minutes % 60
      const formattedHours = String(hours).padStart(2, '0')
      const formattedMins = String(mins).padStart(2, '0')
      return `${formattedHours}:${formattedMins}`
    },
    timeToMinutes(timeString) {
      // 将时间字符串按照小时和分钟分割开来
      var timeParts = timeString.split(':')
      // 将小时部分乘以 60，再加上分钟部分
      var totalMinutes = parseInt(timeParts[0], 10) * 60 + parseInt(timeParts[1], 10)
      return totalMinutes
    },
    // 点击标签页
    handleClick(tab) {
      if (tab.label === '礼拜制') {
        this.labelTag = '1'
      } else {
        this.labelTag = '2'
      }
    },
    // 关闭弹窗
    handleClose() {
      this.labelTag = '1'
      this.dialogForm = {
        name: '',
        days: []
      }
      this.dialogVisible = false
    },
    // 弹窗的确认按钮
    async confirm() {
      // 1024705709255773345
      if (this.dialogType === 'add') {
        const workEndMinute1 = this.timeToMinutes(this.dialogForm.workEndMinute1)
        const workStartMinute1 = this.timeToMinutes(this.dialogForm.workStartMinute1)
        if (this.dialogForm.days.includes('monday')) {
          this.dialogForm.monday = '1'
        } else {
          this.dialogForm.monday = '2'
        }
        if (this.dialogForm.days.includes('tuesday')) {
          this.dialogForm.tuesday = '1'
        } else {
          this.dialogForm.tuesday = '2'
        }
        if (this.dialogForm.days.includes('wednesday')) {
          this.dialogForm.wednesday = '1'
        } else {
          this.dialogForm.wednesday = '2'
        }
        if (this.dialogForm.days.includes('thursday')) {
          this.dialogForm.thursday = '1'
        } else {
          this.dialogForm.thursday = '2'
        }
        if (this.dialogForm.days.includes('friday')) {
          this.dialogForm.friday = '1'
        } else {
          this.dialogForm.friday = '2'
        }
        if (this.dialogForm.days.includes('saturday')) {
          this.dialogForm.saturday = '1'
        } else {
          this.dialogForm.saturday = '2'
        }
        if (this.dialogForm.days.includes('sunday')) {
          this.dialogForm.sunday = '1'
        } else {
          this.dialogForm.sunday = '2'
        }
        this.dialogForm.workEndMinute1 = workEndMinute1
        this.dialogForm.workStartMinute1 = workStartMinute1
        this.dialogForm.operator = 1024705709255773345
        this.dialogForm.workDayNum = this.dialogForm.days.length
        this.dialogForm.restDayNum = 7 - this.dialogForm.days.length
        this.dialogForm.userType = '1'
        const data = {
          ...this.dialogForm
        }
        delete data.days
        await addWorkAPI(data)
        this.$message.success('操作成功')
        this.getWorkList()
        this.dialogVisible = false
      }
      if (this.dialogType === 'edit') {
        if (this.labelTag === '2') {
          const data = {
            friday: String(this.dialogForm.friday),
            id: this.dialogForm.id,
            monday: String(this.dialogForm.monday),
            name: this.dialogForm.name,
            restDayNum: Number(this.dialogForm.restDayNum),
            saturday: String(this.dialogForm.saturday),
            sunday: String(this.dialogForm.sunday),
            thursday: String(this.dialogForm.thursday),
            tuesday: String(this.dialogForm.tuesday),
            operator: Number(1024705709255773345),
            wednesday: String(this.dialogForm.wednesday),
            workDayNum: Number(this.dialogForm.workDayNum),
            workEndMinute1: Number(this.timeToMinutes(this.dialogForm.workEndMinute1)),
            workStartMinute1: Number(this.timeToMinutes(this.dialogForm.workStartMinute1))
          }
          data.operator = this.dialogForm.creater
          await updateWorkAPI(data)
          this.$message.success('操作成功')
        } else {
          const workEndMinute1 = this.timeToMinutes(this.dialogForm.workEndMinute1)
          const workStartMinute1 = this.timeToMinutes(this.dialogForm.workStartMinute1)
          if (this.dialogForm.days.includes('monday')) {
            this.dialogForm.monday = '1'
          } else {
            this.dialogForm.monday = '2'
          }
          if (this.dialogForm.days.includes('tuesday')) {
            this.dialogForm.tuesday = '1'
          } else {
            this.dialogForm.tuesday = '2'
          }
          if (this.dialogForm.days.includes('wednesday')) {
            this.dialogForm.wednesday = '1'
          } else {
            this.dialogForm.wednesday = '2'
          }
          if (this.dialogForm.days.includes('thursday')) {
            this.dialogForm.thursday = '1'
          } else {
            this.dialogForm.thursday = '2'
          }
          if (this.dialogForm.days.includes('friday')) {
            this.dialogForm.friday = '1'
          } else {
            this.dialogForm.friday = '2'
          }
          if (this.dialogForm.days.includes('saturday')) {
            this.dialogForm.saturday = '1'
          } else {
            this.dialogForm.saturday = '2'
          }
          if (this.dialogForm.days.includes('sunday')) {
            this.dialogForm.sunday = '1'
          } else {
            this.dialogForm.sunday = '2'
          }
          this.dialogForm.workEndMinute1 = workEndMinute1
          this.dialogForm.workStartMinute1 = workStartMinute1
          this.dialogForm.operator = 1024705709255773345
          this.dialogForm.workDayNum = this.dialogForm.days.length
          this.dialogForm.restDayNum = 7 - this.dialogForm.days.length
          this.dialogForm.userType = '1'
          const data = {
            ...this.dialogForm
          }
          delete data.days
          await updateWorkAPI(data)
          this.$message.success('操作成功')
        }
        this.handleClose()
        this.getWorkList()
      }
    },
    // 打开窗口
    async openDialog(type, id) {
      if (type === 'add') {
        this.labelTag = '1'
        this.dialogType = 'add'
        this.title = '新增工作模式'
        this.dialogForm.workPatternType = '1'
      }
      if (type === 'del') {
        this.dialogType = 'del'
        this.title = '确认删除'
        this.delId = id
      }
      this.dialogVisible = true
      if (type === 'edit') {
        this.dialogType = 'edit'
        this.title = '修改工作模式'
        const res = await getDetailAPI(id)
        if (res.data.workPatternTypeDesc === '连续制') {
          res.data.workPatternType = String(res.data.workPatternType)
          res.data.workEndMinute1 = this.formatMinutesToTime(res.data.workEndMinute1)
          res.data.workStartMinute1 = this.formatMinutesToTime(res.data.workStartMinute1)
          this.labelTag = String(res.data.workPatternType)
          this.dialogForm = res.data
        } else {
          res.data.workPatternType = String(res.data.workPatternType)
          res.data.workEndMinute1 = this.formatMinutesToTime(res.data.workEndMinute1)
          res.data.workStartMinute1 = this.formatMinutesToTime(res.data.workStartMinute1)
          this.labelTag = String(res.data.workPatternType)
          const data = {
            id: res.data.id,
            name: res.data.name,
            operator: res.data.creater,
            workEndMinute1: res.data.workEndMinute1,
            workStartMinute1: res.data.workStartMinute1,
            workDayNum: res.data.workDayNum,
            restDayNum: res.data.restDayNum,
            workPatternType: res.data.workPatternType,
            days: []
          }
          if (res.data.monday === 1) data.days.push('monday')
          if (res.data.tuesday === 1) data.days.push('tuesday')
          if (res.data.wednesday === 1) data.days.push('wednesday')
          if (res.data.thursday === 1) data.days.push('thursday')
          if (res.data.friday === 1) data.days.push('friday')
          if (res.data.saturday === 1) data.days.push('saturday')
          if (res.data.sunday === 1) data.days.push('sunday')
          this.dialogForm = data
        }
      }
    },
    // pageSize变化时触发
    handleSizeChange(current) {
      this.pageSize = current
      this.getWorkList()
    },
    // currentPage 改变时会触发
    handleCurrentChange(current) {
      this.page = current
      this.getWorkList()
    },
    // 获取工作模式分页列表
    async getWorkList() {
      const res = await getWorkListPageAPI({ page: this.page, pageSize: this.pageSize })
      this.total = Number(res.data.counts)
      this.workList = res.data.items
      this.workList.forEach(item => {
        item.time = ((Number(item.workEndMinute1) - Number(item.workStartMinute1)) / 60).toFixed(2) + '小时'
      })
    }
  }
}
</script>

<style rel="stylesheet/scss" lang="scss" scoped>
::v-deep .el-tabs__item:hover {
  color: #000;
}
::v-deep .el-tabs__item.is-active {
  color: #e15536;
}

::v-deep .el-tabs__active-bar {
  background-color: #e15536;
}
.el-tab-pane {
  display: none;
}
.block {
  text-align: center;
  margin-top: 30px;
}
::v-deep .table-card-box {
  .el-card__body {
    padding-bottom: 0px;
  }
}
::v-deep .pagination{
  padding-bottom: 30px;
}
.tab-box {
  color: #20232a;
  ::v-deep .el-tabs__item.is-active {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
  }
  ::v-deep .el-form-item__content {
    height: 40px;
  }
  ::v-deep .el-tabs__item {
    font-size: 14px;
  }
  ::v-deep .el-tabs__item:hover {
    color: #20232a;
    font-size: 16px;
    font-weight: bold;
    cursor: pointer;
  }
  ::v-deep .el-tabs__active-bar {
    background-color: #e15536;
  }
  ::v-deep .tips {
    margin-left: 130px;
    margin-bottom: 14px;
    color: #bac0cd;
  }
  .el-checkbox {
    margin-right: 12px;
  }
  ::v-deep .workDay {
    .el-form-item__error {
      position: relative;
    }
  }
}
::v-deep .el-dialog__body {
  padding-top: 30px !important;
  .el-tabs__header {
    padding-bottom: 25px;
  }
}
::v-deep .el-tabs__nav,
.is-top {
  transform: translateX(30px) !important;
}
</style>
